<template>
    <div class="container container-announcementDetail">
        <div class="page-top">
            <img class="page-top-bg" :src="require('@/assets/img/resource-bg.png')" />
            <div class="page-top-panel">
                <div class="page-top-title">专业的科技成果转移转化解决方案提供商</div>
                <div class="page-top-tips">解决成果转移转化问题</div>
            </div>
        </div>
        <a-spin tip="Loading..." :spinning="loading">
        <TransformVue v-if="publicityType==='CGZH'" :detailInfo="detailInfo" />
        <ContributeVue v-else-if="publicityType==='GXR'" :detailInfo="detailInfo" />
        <RewardVue v-else :detailInfo="detailInfo" />
        </a-spin>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import TransformVue from "./components/transform.vue";
import ContributeVue from "./components/contribute.vue";
import RewardVue from "./components/reward.vue";
import api from "@/api/api";
import { getStorageUserInfo, loadJS } from "@/utils";
import { UserModule } from "@/store/modules/userModules";
@Component({
    name: "dom",
    components: { TransformVue, ContributeVue, RewardVue },
})
export default class index extends Vue {
    publicityType = "";
    pageId = "";
    mounted() {
        loadJS('./js/html2canvas.js', 'echart', () => {
            //
        })
        const userInfo = getStorageUserInfo();
        if (!userInfo || !userInfo.token) {
            UserModule.setShowLoginPanel(true)
            this.$message.warning("登录失效");
            this.$router.go(-1);
            return;
        }
        const query = this.$route.query;
        this.publicityType = query.publicityType ? query.publicityType + "" : "";
        this.pageId = query.pageId ? query.pageId + "" : "";
        this.getDetail();
    }

    loading = false;
    detailInfo = {};
    async getDetail() {
        this.loading = true;
        try {
            const res = await api.getAnnList({
                publicityType: this.publicityType,
                id: this.pageId,
            });
            this.detailInfo = {...res.data,id:this.pageId};
        } finally {
            this.loading = false;
        }
    }
    splitContent(str: string) {
        return str.slice(0, 65) + "...";
    }
}
</script>

<style lang="scss">
.container-announcementDetail {
    .page-top {
        position: relative;
    }
    .page-top-bg {
        width: 100%;
    }
    .page-top-panel {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .page-top-title {
        font-weight: bold;
        font-size: 45px;
        color: #132042;
    }
    .page-top-tips {
        font-size: 30px;
        color: #132042;
    }
}
</style>
